<template>
  <div class="h100 flowDesignDetail">
    <full-parent-dom-with-dask :loading="loading"></full-parent-dom-with-dask>
    <!-- 基本信息 -->
    <div class="flowDesignDetailBaseInfo mb16">
      <h3 class="title18">{{ $t('basicInformation') }}</h3>
      <div class="titleBottomBox">
        <a-row :gutter="[16, 8]">
          <a-col :sm="24" :xxl="8">
            <!-- 流程名称 -->
            <edit-item
              :label="$t('flowName')"
              textAlign="left"
              :labelWidth="labelWidth"
              :content="processView.basicInfo.definitionName">
            </edit-item>
          </a-col>
          <a-col :sm="24" :xxl="8">
            <!-- 流程编码 -->
            <edit-item
              :label="$t('flowCode')"
              textAlign="left"
              :labelWidth="labelWidth"
              :content="processView.basicInfo.definitionCode">
            </edit-item>
          </a-col>
          <a-col :sm="24" :xxl="8">
            <edit-item
              :label="$t('creator')"
              textAlign="left"
              :labelWidth="labelWidth"
              :content="processView.basicInfo.createBy">
            </edit-item>
          </a-col>
          <a-col :sm="24" :xxl="8">
            <edit-item
              :label="$t('timeOfCreation')"
              textAlign="left"
              :labelWidth="labelWidth"
              :content="$commonFun.getDateTimeStr(processView.basicInfo.createTime)">
            </edit-item>
          </a-col>
        </a-row>
      </div>
    </div>
    <!-- 流程图 -->
    <div class="flowDesignDetailFlowChart mb16">
      <h3 class="title18">{{ $t('flowChart') }}</h3>
      <div class="processViewerBox">
        <process-viewer
          :key="`designer-${processView.index}`"
          v-if="processView.index"
          :xml="processView.xmlData"
          style="height:400px" />
      </div>
    </div>
    <!-- 节点属性 -->
    <div class="flowDesignDetailNodeAttr mb16">
      <h3 class="title18">{{ $t('nodeAttr') }}</h3>
      <div class="titleBottomBox nodeAttrBox">
        <!-- 表格列筛选设置 -->
        <tb-column-filter :all-columns="flowDesignDetailNodeAttrColumns" @updatecolumn="columns = $event">
        </tb-column-filter>
        <!-- 节点属性表格 -->
        <div class="nodeAttrTbBox commonTableSty">
          <a-table
            ref="nodeAttrTable"
            :columns="columns"
            :data-source="processView.nodeInfoList"
            :pagination="false"
            :scroll="{ y: 300, x: 1000 }"
            row-key="flowElementId">
            <!-- 自定义结果通知 -->
            <span slot="resultNoticeColumn">
              {{ $t('resultNotice') }}
              <question-mark-tip :tip-title="$t('resultNoticeTip')" :popupContainer="getPopupContainer">
              </question-mark-tip>
            </span>
            <!-- 自定义撤回通知 -->
            <span slot="canInstanceCancelNoticeColumn">
              {{ $t('cancelNotice') }}
              <question-mark-tip :tip-title="$t('cancelNoticeTip')" :popupContainer="getPopupContainer">
              </question-mark-tip>
            </span>
            <template slot="flowElementCode" slot-scope="text">
              <table-ellipsis :text="text || '-'"></table-ellipsis>
            </template>
            <template slot="flowElementName" slot-scope="text">
              <table-ellipsis :text="text || '-'"></table-ellipsis>
            </template>
            <template slot="approvalRole" slot-scope="text">
              <table-ellipsis :text="text || '-'"></table-ellipsis>
            </template>
            <template slot="approver" slot-scope="text">
              <table-ellipsis :text="text || '-'"></table-ellipsis>
            </template>
            <template slot="canResultNotice" slot-scope="text">
              <table-ellipsis :text="$t(text === 1 ? 'opened' : 'closed')"></table-ellipsis>
            </template>
            <template slot="canInstanceCancelNotice" slot-scope="text">
              <table-ellipsis :text="$t(text === 1 ? 'opened' : 'closed')"></table-ellipsis>
            </template>
            <template slot="remark" slot-scope="text">
              <table-ellipsis :text="text || '-'"></table-ellipsis>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <!-- 高级设置 -->
    <div class="flowDesignDetailAdvancedSetting mb16">
      <h3 class="title18">{{ $t('advancedSettings') }}</h3>
      <div class="titleBottomBox">
        <a-row :gutter="[16, 8]">
          <a-col :sm="24" :xxl="8">
            <!-- 撤回类型 -->
            <edit-item
              textAlign="left"
              :labelWidth="labelWidth"
              :content="$t(processView.advanceSetting.cancelType === 20 ? 'nonforce' : 'force')">
              <template slot="label">
                <el-tooltip key="withdrawType" placement="top" @click.stop.prevent>
                  <div slot="content">
                    <p>{{ $t('withdrawTypeTip') }}</p>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span style="margin-left:2px">{{ $t('withdrawType') }}</span>
              </template>
            </edit-item>
          </a-col>
          <a-col :sm="24" :xxl="8">
            <!-- 文件个数 -->
            <edit-item textAlign="left" :labelWidth="labelWidth" :content="processView.advanceSetting.fileCount || '-'">
              <template slot="label">
                <el-tooltip key="withdrawType" placement="top" @click.stop.prevent>
                  <div slot="content" class="flowDesignPropertyInputTipBox">
                    <p>{{ $t('fileCountSortTip') }}</p>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span style="margin-left:2px">{{ $t('fileCount') }}</span>
              </template>
            </edit-item>
          </a-col>
          <a-col :sm="24" :xxl="8">
            <!-- 文件大小 -->
            <edit-item textAlign="left" :labelWidth="labelWidth" :content="processView.advanceSetting.fileSize + 'M'">
              <template slot="label">
                <el-tooltip key="withdrawType" placement="top" @click.stop.prevent>
                  <div slot="content" class="flowDesignPropertyInputTipBox">
                    <p>{{ $t('fileSizeTip') }}</p>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span style="margin-left:2px">{{ $t('fileSize') }}</span>
              </template>
            </edit-item>
          </a-col>
          <a-col :sm="24" :xxl="8">
            <!-- 触达提醒 -->
            <edit-item
              textAlign="left"
              :labelWidth="labelWidth"
              :content="$t(processView.advanceSetting.canTouchNotice === 1 ? 'opened' : 'closed')">
              <template slot="label">
                <el-tooltip key="withdrawType" placement="top" @click.stop.prevent>
                  <div slot="content" class="flowDesignPropertyInputTipBox">
                    <p>{{ $t('touchReminderTip') }}</p>
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span style="margin-left:2px">{{ $t('touchReminder') }}</span>
              </template>
            </edit-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 8]">
          <a-col :sm="24" :xxl="24">
            <!-- 流程备注 -->
            <edit-item
              textAlign="left"
              :labelWidth="labelWidth"
            >
              <template slot="label">
                <span style="margin-left:2px">{{ $t('flowRemark') }}</span>
              </template>
              <div>{{ processView.advanceSetting.remark || '-' }}</div>
            </edit-item>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script>
import EditItem from '@/components/EditItem'
import { flowDesignDetailNodeAttrColumns } from './config/list'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import ProcessViewer from '@/components/ProcessViewer'
import flowDesignApi from '@/api/modules/flowManage/flowDesign'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import TbColumnFilter from '@/components/TbColumnFilter'
const initProcessView = {
  index: '',
  xmlData: '',
  basicInfo: {},
  nodeInfoList: [],
  advanceSetting: {}
}
export default {
  components: {
    EditItem,
    QuestionMarkTip,
    ProcessViewer,
    FullParentDomWithDask,
    tableEllipsis,
    TbColumnFilter
  },
  data () {
    return {
      // 流程id
      processId: '',
      labelWidth: 100,
      columns: [],
      flowDesignDetailNodeAttrColumns,
      processView: {
        ...initProcessView
      },
      loading: false
    }
  },
  created () {
    this.initColumns()
    this.initDetailData()
  },
  methods: {
    initColumns () {
      this.columns = flowDesignDetailNodeAttrColumns.map(item => {
        return {
          ...item
        }
      })
    },
    initDetailData () {
      this.processId = this.$route.query.id
      if (this.processId) {
        this.processView = {
          ...initProcessView
        }
        this.loading = true
        Promise.all([this.getProcessBaseInfo(), this.getProcessXmlData()]).then(() => {
        }).finally(() => {
          this.loading = false
        })
      }
    },
    // 获取基本信息(详情中除了流程图以外的数据)
    getProcessBaseInfo () {
      return new Promise((resolve, reject) => {
        flowDesignApi.getFlowDesinBaseInfoData(this.processId).then(res => {
          const { data } = res
          this.processView.advanceSetting = data.advanceSetting
          this.processView.basicInfo = data.basicInfo
          this.processView.nodeInfoList = data.nodeInfoList
          resolve(true)
        }).finally(() => {
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 获取流程图
    getProcessXmlData () {
      return new Promise((resolve, reject) => {
        flowDesignApi.getFlowDesinXmlData(this.processId).then(res => {
          this.processView.index = this.processId
          this.processView.xmlData = res.data
          resolve(true)
        }).finally(() => {
        }).catch(err => {
          reject(err)
        })
      })
    },
    getPopupContainer () {
      return document.body
    }
  }
}
</script>
<style lang="less" scoped>
.flowDesignDetail {
  padding: 24px;
  user-select: none;
  overflow-y: scroll;
  // height: 810px;
  .titleBottomBox {
    padding-left: 16px;
    margin-top: 8px;
  }

  .processViewerBox {
    padding-left: 16px;
    margin-top: 8px;
  }

  .nodeAttrBox {
    padding: 0;

    .nodeAttrTbBox {
      margin-top: 8px;
      padding-left: 16px;
    }
  }
}
</style>
<style lang="less">
.tableColumnScreenLists {
  .ant-popover-inner-content {
    padding: 8px 0;
  }
}
</style>
